<template>
	<view class="page-bg">
		<!-- navBar -->
		<view class="w-full page-bg fixed top-0 left-0 z-10">
			<!-- 安全区 -->
			<view class="safe-area" :style="{ height: `${statusBarHeight}px` }"></view>
			<!-- bar  fixed固定顶部-->
			<view class="flex items-center gap-4 pl-4" :style="{ height: `${titleBarHeight}px` }">
				<view class="font-bold">{{ title }}</view>
				<view class="w-[150rpx] pl-[10rpx] py-[5rpx] border border-mp_tc3 border-solid rounded-lg flex items-center gap-1" @click="toSearch">
					<uni-icons type="search" />
					<view class="text-[24rpx] text-[rgba(0,0,0,0.7)]">搜索</view>
				</view>
			</view>
		</view>
		<!-- 填充区   navBar fixed定位之后缺失的部分-->
		<view :style="{ height: `${navBarHeight}px` }"></view>
	</view>
</template>

<script setup>
	import { useNavSize } from '@/hooks'
	const { titleBarHeight, navBarHeight, statusBarHeight } = useNavSize()
	import { useAppStore } from '@/store/modules'
	const appStore = useAppStore()

	function clear() {
		appStore.$reset()
	}
	defineProps({
		title: String,
		required: true
	})

	function toSearch() {
		uni.navigateTo({
			url: '/pages/search/index'
		})
	}
</script>

<style scoped>
	.safe-area {
		height: v-bind(statusBarHeight + 'px');
	}
</style>
